<template>
  <a_page>
    <q-splitter v-model="splitterModel" class="h-full">
      <template v-slot:before>
        <q-toolbar>
          <q-btn push text-color="primary" label="新增" icon="add" @click="详情.初始化()" dense />
        </q-toolbar>
        <div class="a-tree">
          <el-tree ref="treeRef" :data="单项组" default-expand-all node-key="id" :props="元件袋.组件.树结构"
            :expand-on-click-node="false" highlight-current @current-change="点击树">
            <template #default="{ node, data }">
              <span class="a-tree-node">
                <span class="a-tree-node-label">{{ node.label }}</span>
                <span>
                  <el-dropdown>
                    <span class="el-more-filled">
                      <el-icon><more-filled /></el-icon>
                    </span>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <!-- <el-dropdown-item @click="addOrg(data.id)"> -->
                        <el-dropdown-item @click="详情.新增子级(data.id)">
                          <el-icon>
                            <Plus />
                          </el-icon>
                          新增子级</el-dropdown-item>
                        <!-- <el-dropdown-item @click="editOrg(data)"> -->
                        <el-dropdown-item @click="详情.初始化(data)">
                          <el-icon>
                            <CirclePlus />
                          </el-icon>
                          编辑</el-dropdown-item>
                        <el-dropdown-item @click="list树.删(data)">
                          <el-icon class="text-negative">
                            <Delete />
                          </el-icon><span>删除</span>
                        </el-dropdown-item>
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </span>
              </span>
            </template>
          </el-tree>
        </div>
      </template>
      <template v-slot:after>
        <list2 ref="list2ref" :元件袋="元件袋"></list2>
      </template>
    </q-splitter>
    <a详情 ref="详情ref" :list="list树"></a详情>
  </a_page>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted, watch } from 'vue'
import use from '@/hooks/uselist';
import a详情 from './详情_抽屉式.vue'
import list2 from './list2.vue'
const 关联id = "基础.人员"
import use元件袋 from "@/hooks/use元件袋"
const 元件袋 = use元件袋()
const list树 = use({ req: { 树结构: true, pageSize: 0 } }, 元件袋)
const { a, 单项组, 树设置, req } = list树
const 详情 = ref();
const 关联list = ref();
onMounted(() => {
  详情.value = 详情ref.value.详情
  关联list.value = list2ref.value.list
  // console.log(`赋值list树 ing👇`)
  // list树.关联list = 关联list
})

watch(单项组, (newValue, oldValue) => {
  // console.log(`单项组 变了👉`, 单项组)
  // console.log(`关联list 👉`, 关联list)
  关联list.value.元件袋.取候选值集()
})

// req.pageSize = 0
// req.树结构 = true

const 详情ref = ref()
const splitterModel = ref(20)
const list2ref = ref()

const 末级ids = [];
const 点击树 = (e) => {
  // console.log(`点击树e 👉`, e)
  // let 部门id = e.id
  // if (部门id) {
  //   list2ref.value.req.
  // }
  末级ids.length = 0
  取全部末级(e);
  // console.log(`末级ids 👉`, 末级ids)
  if (末级ids.length > 0) {
    let arr = [{
      字段名: "部门_部门id",
      比较运算符: "in",
      字段值: 末级ids,
    }]
    关联list.value.筛选.改且保存(arr)
  }
}
const 取全部末级 = (node) => {
  if (node.children && node.children.length > 0) {
    node.children.forEach(child => {
      取全部末级(child);
    });
  } else {
    末级ids.push(node.id);
  }
};
</script>
<style scope lang="scss"></style>